<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>语音识别</title>
    <style>
        body{
          overflow: hidden;
          padding: 0;
          
        } 
     
 @keyframes fadeInOutstop {
        0%, 100% {
          height: 8px;
        }
        50% {
          height: 9px;
        }
      }
        @keyframes fadeInOut {
        0%, 100% {
          height: 8px;
        }
        50% {
          height: 80px;
        }
      } 
 
       .audio {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        height: 128px;
        width: 600px;
       
       
        padding: 20px;
        border-radius: 16px;
        overflow: hidden;
        background-color: #fff;
       
      }
 
      .audio-item {
        background: linear-gradient(180deg, #0204FA 0%, rgba(26, 53, 112, 0) 100%);
        border-radius: 4px;
        width: 8px;
        height: 80px;
      } 
      
        .div_class_buttons{
            margin-top: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
        }       
  .voiceBtn {
    width: 150px;
    height: 50px;
    border-radius: 24px;
    overflow: hidden;
    background-color:#AFB2BB ;
    font-size: 30px;
    margin: 0 10px;

    &:active {
      background-color: #aaa;
    }
  }
 .stop{
  display: flex;
  flex-direction: column;
  align-items: center;
 }
  .stopBtn{
    width: 200px;
    height: 80px;
    background-color: #088AFD ;
   border-radius: 36px;
   overflow: hidden;
   color:#FFFFFF ;
   font-size:30px;
  margin-top: 28px;
  margin-left: 40%;
  border: none;
  outline: none;
  }
  .start{
    display: flex;
    flex-direction: column;
    margin-left: 18%;
    
  }
  .textTip{
    width: 80%;
    height: 180px;
    border-radius: 30px;
    overflow: hidden;
    background: #FFFFFF;
    text-align: center;
    color:#292828 ;
    font-size:48px;
  box-sizing: border-box;
  padding-top: 45px;

    

}
.startBtn{
  width: 230px;
    height: 80px;
    background-color: #088AFD ;
   border-radius: 36px;
   overflow: hidden;
   color:#FFFFFF ;
   font-size:30px;
  margin-top: 28px;
  margin-left: 25%;
  border: none;
  outline: none;

}
        
    </style>
  </head>
  <body style="">
    <script src="js/recorder-core.js" charset="UTF-8"></script>
    <script src="js/wav.js" charset="UTF-8"></script>
    <script src="js/pcm.js" charset="UTF-8"></script>

  <!--   <h1>FunASR Demo</h1>
    <h3>
      这里是FunASR开源项目体验demo，集成了VAD、ASR与标点等工业级别的模型，支持长音频离线文件转写，实时语音识别等，开源项目地址：https://github.com/alibaba-damo-academy/FunASR
    </h3>

    <div class="div_class_topArea">
      <div class="div_class_recordControl">
        asr服务器地址(必填):
        <br />
        <input
          id="wssip"
          type="text"
          onchange="addresschange()"
          style="width: 100%; height: 100%"
          value="wss://127.0.0.1:10095/"
        />
        <br />
        <a
          id="wsslink"
          href="#"
          onclick="window.open('https://127.0.0.1:10095/', '_blank')"
          ><div id="info_wslink">点此处手工授权wss://127.0.0.1:10095/</div></a
        >
        <br />
        <br />
        <div style="border: 2px solid #ccc">
          选择录音模式:<br />

          <label
            ><input
              name="recoder_mode"
              onclick="on_recoder_mode_change()"
              type="radio"
              value="mic"
              checked="true"
            />麦克风 </label
          >&nbsp;&nbsp;
          <label
            ><input
              name="recoder_mode"
              onclick="on_recoder_mode_change()"
              type="radio"
              value="file"
            />文件
          </label>
        </div>

        <br />
        <div id="mic_mode_div" style="border: 2px solid #ccc; display: block">
          选择asr模型模式:<br />

          <label
            ><input
              name="asr_mode"
              type="radio"
              value="2pass"
              checked="true"
            />2pass </label
          >&nbsp;&nbsp;
          <label
            ><input name="asr_mode" type="radio" value="online" />online </label
          >&nbsp;&nbsp;
          <label
            ><input name="asr_mode" type="radio" value="offline" />offline
          </label>
        </div>

        <div id="rec_mode_div" style="border: 2px solid #ccc; display: none">
          <input type="file" id="upfile" />
        </div>
        <br />
        <div id="use_itn_div" style="border: 2px solid #ccc; display: block">
          逆文本标准化(ITN):<br />
          <label
            ><input
              name="use_itn"
              type="radio"
              value="false"
              checked="true"
            />否 </label
          >&nbsp;&nbsp;
          <label><input name="use_itn" type="radio" value="true" />是 </label>
        </div>
        <br />
        <div style="border: 2px solid #ccc">
          热词设置(一行一个关键字，空格隔开权重,如"阿里巴巴 20")：
          <br />

          <textarea rows="3" id="varHot" style="width: 100%; height: 100%">
阿里巴巴 20&#13;hello world 40</textarea
          >
          <br />
        </div> -->
      <!--   <div class="shiftText" id="shiftText">
           <img  src="images/backs.png" alt="" class="backs">
            <div class="stxt" >转文字</div>
          </div> -->
       <!--  语音识别结果显示： -->
        <br />

        <textarea
          rows="10"
          id="varArea"
          readonly="true"
          style="display: none"
        ></textarea>
        <br />
     <div class="start" id="content"  >
        <div class="textTip">点击麦克风开始语音录入</div>
         
           
               <button id="btnStarts" class="startBtn"> <img src="images/sy.png" alt=""></button>
              
    
    

       </div>
       <div class="stop" id="contentStop">
        <div class="audio"  id="audioVisualizer"></div> 
          <div class="audio"  id="audioVisualizerstop" style="display: none;"></div>
       
            <button id="btnStart" class="startBtn" style="display: none;"> <img src="images/sy.png" alt=""></button>
                  
        <button id="btnStop"  class="stopBtn">停止</button>
       </div>
       <!--  <div id="info_div">请点击开始</div> -->
       
    
      </div>
   

      
      </div>
    </div>
    <script src="js/wsconnecter.js" charset="utf-8"></script>
    <script src="js/main.js" charset="utf-8"></script>
    <script>
/*         var startVisible = 1;
  window.addEventListener('message', function(event) {
           
            // 检查消息内容
            if (event.data ) {
             startVisible =   event.data.startVisible
             console.log(startVisible)
             showdiv()
            }
        });
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
      function showdiv(){
        if(startVisible ===0){
          console.log('000000')
          document.getElementById("content").style.display = "block";//开始
          document.getElementById("contentStop").style.display = "none";
         // startVisible = false;
        }else{
          console.log('111111111')
          document.getElementById("content").style.display = "none";//停止 说完了
          document.getElementById("contentStop").style.display = "block";//开始
       records()
          //startVisible = true;
        }
      }
      showdiv()
      // 动态生成音频可视化条
      const audioVisualizer = document.getElementById('audioVisualizer');
      const list = Array(18).fill(null).map((_, index) => ({
        animation: `fadeInOut ${Math.random() * 2 + 0.5}s ease-in-out infinite`
      }));
      
      // 创建音频条
      list.forEach((item, index) => {
        const bar = document.createElement('div');
        bar.className = 'audio-item';
        bar.style.animation = item.animation;
       //bar.style= item;
        audioVisualizer.appendChild(bar);
      }); */
  
    </script>
   
   
  
  </body>
</html>
